<template>
<div class="main">
    <div class="login-box">
    <div class="title">登录</div>
        <el-form
        autocomplete="off"
        :rules="rules"
        ref="form" :model="fromData" label-width="70px" label-position="left">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="fromData.username" placeholder="请输入用户"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="fromData.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label-width="0px">
                <el-button 
                @click="Login"
                class="button"
                type="primary"
                >登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
<el-dialog
 v-model="dialog" 
 align-center
  width="350"
  >
 <CodeImg @get-code-info="sendLogin"></CodeImg>
  </el-dialog>
</template>
<script setup>
import {ref} from 'vue'
import CodeImg from '@/components/CodeImg.vue'
import {textLogin} from '@/api/login'
const sendLogin = async (uuid,info)=>{
    const res = await textLogin({
        uuid:uuid,
        info:info,
        username:fromData.value.username,
        password:fromData.value.password
    })
    console.log(res);
    if(res.code == 200){

    }
}
//配置规则
const rules = {
    username:[
        {
            required:true,
            message:'请输入用户名',
            trigger:"blur"
        },
        {min:4,max:10,message:'用户名必须是5-10位的字符',trigger:'blur'}
    ],
    password:[
        {
            required:true,
            message:'请输入密码',
            trigger:'blur'
        },
        {min:6,max:15,message:'密码必须是6-15位的非空字符',trigger:'blur'}
    ]
}
const from = ref('')
const fromData = ref({
    username:'',
    password:''
})
const dialog = ref(false)
//登录事件
const Login = ()=>{
     dialog.value = true
}
</script>

<style lang="scss">
*{
    padding: 0;
    margin: 0;
}
.main{
     display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image:url('@/assets/bg.svg');
   background-size: cover;
    .login-box{
        width: 280px;
        padding: 20px;
        border-radius: 10px;
        background-color: #fff;
        border-radius: 18px;
        box-shadow:  12px 8px 15px rgba(0,0,0,.5);
             
        .title{
            margin: 5px auto;
            text-align: center;
            color: rgba(0,0,0,.8);
            font-size: 25px;
        }
        .button{
            width: 200px;
            margin: 0 auto;
        }
    }
}
</style>